<template>
  <div>
    <!-- 返回按钮 -->
    <van-icon
      class="go-back"
      name="arrow-left"
      size="20"
      @click="goBack"
    />
    <div class="container">
      <!-- 标题 -->
      <h2>短信登录</h2>
      <van-cell-group :border="false">
        <!-- 手机号 -->
        <van-field
          v-model="tel"
          class="inp"
          placeholder="请输入手机号"
          size="large"
        />
        <!-- 验证码 -->
        <van-field
          v-model="code"
          class="inp"
          center
          clearable
          placeholder="请输入验证码"
          size="large"
        >
          <template #button>
            <div class="send-code">发送验证码</div>
          </template>
        </van-field>
        <van-cell />
      </van-cell-group>
      <!-- 按钮 -->
      <van-button
        class="login-btn"
        color="linear-gradient(-45deg, #ff6034, #ee0a24)"
      >
        登 录
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      // 手机号
      tel: '',
      // 验证码
      code: '',
    };
  },
  methods: {
    goBack() {
      // 回到上一页
      this.$router.go(-1);
    },
  },
}
</script>

<style lang="less" scoped>
.go-back {
  display: block;
  padding: 16px;
  color: #999;
}
h2 {
  font-weight: 400;
  margin-bottom: 32px;
}
.container {
  padding: 32px;
  .send-code {
    color: #999;
  }
  .inp {
    padding: 16px 0;
  }
  .login-btn {
    width: 100%;
    margin-top: 16px;
  }
}
</style>
